<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="html5,jquery,ui,widgets,ajax,ria,web framekwork,web development,easy,easyui,datagrid,treegrid,tree">
		<meta name="description" content="jQuery EasyUI is a complete framework for HTML5 web page. It provides easy to use components for building modern, interactive, javascript applications that work on pc and mobile devices.">
		<title>passwordbox - Documentation - jQuery EasyUI</title>
        <link rel="stylesheet" href="/css/kube.css" type="text/css" />
        <link rel="stylesheet" type="text/css" href="../css/main.css">
		<link rel="stylesheet" type="text/css" href="../../prettify/prettify.css">
		<script type="text/javascript" src="../../prettify/prettify.js"></script>
		<script type="text/javascript" src="/easyui/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
								$('textarea[name="code-passwordbox"]').each(function(){
					var data = $(this).val();
					data = data.replace(/(\r\n|\r|\n)/g, '\n');
					if (data.indexOf('\t') == 0){
						data = data.replace(/^\t/, '');
						data = data.replace(/\n\t/g, '\n');
					}
					data = data.replace(/\t/g, '    ');
					var pre = $('<pre name="code" class="prettyprint linenums"></pre>').insertAfter(this);
					pre.text(data);
					$(this).remove();
				});
				prettyPrint();
			});
		</script>
	</head>
	<body>
		<div id="header" class="group wrap header">
			<div class="content">
	<div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1">
		<span>EasyUI</span>
	</div>
	<div id="elogo" class="navbar navbar-left">
		<ul>
			<li>
				<a href="/index.php"><img src="/images/logo2.png" alt="jQuery EasyUI"/></a>
			</li>
		</ul>
	</div>
	<div id="navbar-1" class="navbar navbar-right">
		<ul>
			<li><a href="/index.php">Home</a></li>
			<li><a href="/demo/main/index.php">Demo</a></li>
			<li><a href="/tutorial/index.php">Tutorial</a></li>
			<li><a href="/documentation/index.php">Documentation</a></li>
			<li><a href="/download/index.php">Download</a></li>
			<li><a href="/extension/index.php">Extension</a></li>
			<li><a href="/contact.php">Contact</a></li>
			<li><a href="/forum/index.php">Forum</a></li>
		</ul>
	</div>
	<div style="clear:both"></div>
</div>
<script type="text/javascript">
	function setNav(){
		var demosubmenu = $('#demo-submenu');
		if (demosubmenu.length){
			if ($(window).width() < 450){
				demosubmenu.find('a:last').hide();
			} else {
				demosubmenu.find('a:last').show();
			}
		}
		if ($(window).width() < 767){
			$('.navigation-toggle').each(function(){
				$(this).show();
				var target = $(this).attr('data-target');
				$(target).hide();
				setDemoNav();
			});
		} else {
			$('.navigation-toggle').each(function(){
				$(this).hide();
				var target = $(this).attr('data-target');
				$(target).show();
			});
		}
	}
	function setDemoNav(){
		$('.navigation-toggle').each(function(){
			var target = $(this).attr('data-target');
			if (target == '#navbar-demo'){
				if ($(target).is(':visible')){
					$(this).css('margin-bottom', 0);
				} else {
					$(this).css('margin-bottom', '2.3em');
				}
			}
		});
	}
	$(function(){
		setNav();
		$(window).bind('resize', function(){
			setNav();
		});
		$('.navigation-toggle').bind('click', function(){
			var target = $(this).attr('data-target');
			$(target).toggle();
			setDemoNav();
		});
	})
</script>		</div>
		<div id="mainwrap">
			<div id="content" class="content">
			

<div style="padding:10px">

<h3>PasswordBox</h3>
<p>Extend from $.fn.textbox.defaults. Override defaults with $.fn.passwordbox.defaults.</p>
<p>
The passwordbox allows the user to input passwords with nice feedback.
The passwordbox protects your password by showing dots instead of the password text.
It can display an eye icon to help make sure that you typed the right characters.
</p>
<img src="images/passwordbox.png"/>

<h4>Dependencies</h4>
<ul>
	<li>textbox</li>
</ul>

<h4>Usage</h4>
<p>Create passwordbox from markup.</p>
<textarea name="code-passwordbox" class="html">
	<input class="easyui-passwordbox" prompt="Password" iconWidth="28" style="width:100%;height:34px;padding:10px">
</textarea>
<p>Create passwordbox by using javascript.</p>
<textarea name="code-passwordbox" class="js">
	<input id="pb" type="text" style="width:300px">
	$(function(){
		$('#pb').passwordbox({
			prompt: 'Password',
			showEye: true
		});
	});
</textarea>

<h4>Properties</h4>
<p>The properties extend from textbox, below is the added or overridden properties for passwordbox.</p>
<table class="doc-table">
<tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>
<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>passwordChar</td>
<td>string</td>
<td>The password character to display on the textbox.</td>
<td>%u25CF</td>
</tr>
<tr>
<td>checkInterval</td>
<td>number</td>
<td>The interval time to check and convert the inputing characters to password characters.</td>
<td>200</td>
</tr>
<tr>
<td>lastDelay</td>
<td>number</td>
<td>The delay time to convert the last inputing character to password character.</td>
<td>500</td>
</tr>
<tr>
<td>revealed</td>
<td>boolean</td>
<td>Defines if to reveal the hidden password.</td>
<td>false</td>
</tr>
<tr>
<td>showEye</td>
<td>boolean</td>
<td>Defines if to display the eye icon.</td>
<td>true</td>
</tr>
</table>

<h4>Events</h4>
<p>The events extend from textbox.</p>

<h4>Methods</h4>
<p>The methods extend from textbox, below is the added methods for passwordbox.</p>
<table class="doc-table">
<tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>
<tr>
<td>showPassword</td>
<td>none</td>
<td>Display the real password.</td>
</tr>
<tr>
<td>hidePassword</td>
<td>none</td>
<td>Hide the real password.</td>
</tr>
</table>

﻿			</div>
		</div>
		<div id="footer" class="content text-centered">
			<div>Copyright © 2010-2017 www.jeasyui.com</div>
		</div>
	</body>
</html>